<!--
 * @Author: zhao 13370229059@163.com
 * @Date: 2024-04-21 19:50:31
 * @LastEditors: zhao 13370229059@163.com
 * @LastEditTime: 2024-04-23 15:26:48
 * @FilePath: \work\components\z-navbar\z-navbar.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="navbar">
    <uv-navbar
      leftText=" "
      title="扫码报工"
      :titleStyle="{ fontSize: '30px' }"
      :safeAreaInsetTop="false"
      style="width: 100%"
      :fixed="false"
    >
      <!-- #ifdef MP -->
      <template v-slot:left>
        <view class="flex">
          <uv-icon name="scan" size="40" @click="onScan"></uv-icon>
          <uv-line direction="column" :hairline="false" length="30" margin="5px 8px"></uv-line>
          <uv-icon name="out-light" custom-prefix="custom-icon" color="#000" size="30" @click="quit"></uv-icon>
        </view>
      </template>
      <!-- #endif -->
      <!-- #ifndef MP -->
      <template v-slot:left>
        <view></view>
      </template>
      <template v-slot:right>
        <view class="flex">
          <uv-icon name="scan" size="40" @click="onScan"></uv-icon>
          <uv-line direction="column" :hairline="false" length="30" margin="5px 8px"></uv-line>
          <uv-icon name="out-light" custom-prefix="custom-icon" color="#000" size="30" @click="quit"></uv-icon>
        </view>
      </template>
      <!-- #endif -->
    </uv-navbar>
  </view>
  <uv-toast ref="toastRef"></uv-toast>
</template>

<script setup>
  import { defineEmits, ref } from 'vue';
  let toastRef = ref();
  let emits = defineEmits(['qrCode']);
  const quit = () => {
    uni.$uv.route({
      url: '/pages/login/index',
      type: 'reLaunch'
    });
  };
  const onScan = () => {
    uni.scanCode({
      scanType: ['qrCode'],
      success: res => {
        let result = res.result || '';
        try {
          result = JSON.parse(result);
          if (!result.action) {
            toastRef.value.show({
              type: 'error',
              message: '扫码错误'
            });
            return;
          }
          emits('qrCode', result);
        } catch (error) {
          toastRef.value.show({
            type: 'error',
            message: '扫码错误'
          });
        }
      }
    });
  };
</script>

<style lang="scss" scoped>
  .flex {
    display: flex;
  }
  .navbar {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
</style>
